// pages/index.tsx
import React from 'react';
import CommonCharts from '@ray-js/common-charts';
import { View,navigateTo } from '@ray-js/ray';
import styles from './index.module.less';

export default function PrimaryPieChart(props) {

  return (
    <View className={styles.piechart}>
      <CommonCharts
        usingPlugin={true}
        notMerge={false}
        option={{
          polar: {
            radius: [20, '60%'],
            center: ['50%', '25%'],
          },
          radiusAxis: {
            min:0,
            max: 9,
            interval: 1,
          },
          angleAxis: {
            type: 'category',
            data: ['真实', '勇敢', '关怀', '觉知','行动'],
            startAngle: 126,
            axisLabel:{
              show:true,
              fontSize: 15,
              fontWeight:1000
            },
            splitLine:{
              show:false
            },
            axisLine:{
              show:true,
              lineStyle: {
              color: '#ffffff', // 设置红色轴线
              width: 5
              },
            },
          },
          tooltip: {
            show:false
          },
          series: {
            type: 'bar',
            barWidth: '99%', 
            data: [
            { value: props.value1, itemStyle: { color: '#64b3f9' } },
            { value: props.value2, itemStyle: { color: '#de8ff2' } },
            { value: props.value3, itemStyle: { color: '#f0637f' } },
            { value: props.value4, itemStyle: { color: '#faca6b' } },
            { value: props.value5, itemStyle: { color: '#7cd5d1' } }
          ],
            coordinateSystem: 'polar',
            label: {
              show: true,
              position: 'middle',
              color: '#ffffff',  // 设置标签颜色
              fontSize: 17,
              formatter: '{c}'
            }
          },
          animation: false
        }}
      />
    </View>
  );
}